<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>JS的组成部分：DOM、BOM、ECMAScript</p>
  <p>DOM：文档对象模型</p>
  <p>BOM：浏览器对象模型</p>
  <p>ECMAScript：JS的核心，包含流程控制语句等其他逻辑代码</p>
  <input type="text" id="input" placeholder="请输入充值金额">
  <button onclick="charge()">不充值，你会变强吗？</button>
  <hr>
  <button onclick="add()">向数组尾部添加内容</button>
  <button onclick="del()">从数组尾部删除内容</button>
  <button onclick="shift()">从数组头部删除内容</button>
  <button onclick="unshift()">向数组头部添加内容</button>
  <hr>
  <script>
    function charge () {
      // let money = document.getElementById('input').value;
      let money = input.value;
      if(money >= 100){
        alert('充值成功！充值金额：￥'+ money +'元')
      }else {
        alert('100起充！')
      }
    }
    let str1 = 'Jack Ma';
    console.log(str1);
    let num1 = 18;
    console.log(num1);
    let hasWude = true;
    console.log(hasWude);
    let arr1 = [1,2,3,4,'wu',true];
    console.log(arr1);
    let person = {
      name: 'Pony Ma',
      age: 40,
      isRich: true
    }
    let name = 'age';
    console.log(111,person.name);
    console.log(222,person[name]);
    // 点击按钮，给数组添加内容
    function add() {
      arr1.push('我是最后一项');
      console.log(arr1);
    }
    // 点击按钮，删除数据
    function del() {
      arr1.pop();
      console.log(arr1);
    }
    function shift() {
      arr1.shift();
      console.log(arr1);
    }
    function unshift() {
      arr1.unshift('一');
      console.log(arr1);
    }
  </script>
</body>
</html>